<template>
    <h1>这是一个vuex页</h1>
    <p>count:{{ count }}</p>
    <!-- <p>tenTimes:{{ tenTimes }}</p> -->
    <h1>命名空间</h1>
    <p>无命名空间</p>
    <p>访问 模块A中的state数据:{{ $store.state.a.countA }}</p>
    <p>访问 模块A中的getter数据:{{ $store.getters.countA }}</p>
    <p>有命名空间</p>
    <p>访问 模块B中的state数据:{{ $store.state.b.countB }}</p>
    <p>访问 模块B中的getter数据:{{ $store.getters['b/countBB'] }}</p>

    <h1>MapXX 方法</h1>
    <h2>全局</h2>
    <p>count:{{ count }}</p>
    <p>getters</p>
    <p>tenTimes:{{ tenTimes }}</p>
    <p>countAA:{{ countAA }}</p>
    <p>mutations</p>
    <button @click="emitIncrementMut">触发incrementMut</button>
    <button @click="increaseA">触发increaseA</button>
    <p>actions</p>
    <button @click="emitIncrementAct">直接触发emitIncrementAct</button>
    <button @click="asyncIncreaseA">直接触发asyncIncreaseA</button>

    <h2>局部</h2>
    <p>moduleB state</p>
    <p>countB: {{ countB }}</p>

    <p>moduleB mutations</p>
    <button @click="emitIncreaseB">触发increaseB</button>

    <h2>重命名</h2>
    <p>countAlias:{{ countAlias }}</p>
</template>

<script>

import{mapState,mapGetters,mapMutations,mapActions} from "vuex"
    export default{
        computed:{
            ...mapState(['count']),
            ...mapGetters(['tenTimes','countAA']),

            ...mapState(['b','countB']),

            ...mapState({
                countAlias:'count'
            })
        },
        methods:{
            ...mapMutations(['incrementMut','increaseA']),
            
            emitIncrementMut(){
                this.incrementMut({count:40})
            },
            ...mapActions(['incrementAct','asyncIncreaseA']),
            emitIncrementAct(){
                this.incrementAct({count:400})
            },

            ...mapMutations('b',['increaseB']),
            emitIncreaseB(){
                this.increaseB()
            },
        }
    }
    // export default{
    //     computed:{
    //         count(){
    //             return this.$store.state.count
    //         },
    //         tenTimes(){
    //             return this.$store.getters.tenTimes
    //         }
    //     }   
    // }
</script>

<style scoped>

</style>